<template>
  <div class="login-container">
    <div class="logo">
      <div class="icon"></div>
      <img src="@/assets/login.svg" width="300" alt="" />
      <p>开箱即用的中后台管理系统</p>
    </div>
    <div class="form">
      <h3>iHRM 人力资源管理系统</h3>
      <a-card class="login-card">
        <a-form
          :model="formState"
          name="basic"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            name="mobile"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
            ]"
          >
            <a-input size="large" v-model:value="formState.mobile" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password
              size="large"
              placeholder="请输入密码"
              v-model:value="formState.password"
            />
          </a-form-item>
          <a-form-item name="remember">
            <a-checkbox v-model:checked="formState.remember">请先同意用户协议</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button size="large" type="primary" block html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { login } from '@/api/login'
import useToken from '@/stores/token'
import router from '@/router'
const { updateToken } = useToken()
const formState = reactive({
  mobile: '13800000002',
  password: '123456',
  remember: true
})
// 发起请求
const onFinish = async (values) => {
  const data = await login(values)
  updateToken(data) // 更新token
  router.push('/')
}

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}
</script>

<style lang="less">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(@/assets/common/logBg.png) no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
    .icon {
      background: url(@/assets/logo.png) no-repeat 70px center / contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 50px;
    .ant-card {
      width: 320px;
      border: none;
      padding: 0;
    }
    h3 {
      padding-left: 30px;
      font-size: 24px;
    }
  }
}
</style>
